<template>
  <div class="group-item">
    <slot name="item">
      <slot name="item-head">
        <div class="el-card item-head" v-if="showItemHead">
          <div class="head-text">{{group[groupNameKey]}}</div>
        </div>
      </slot>
      <slot name="item-table">
        <avue-crud :data="data"
                   :page="page"
                   :option="option"
                   v-model="obj"
                   :table-loading="loading"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @refresh-change="refreshChange"
                   @search-reset="searchChange"
                   @search-change="searchChange"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   ref="crud"
        >
          <template v-slot:menu="scope">
            <slot name="crud-menu" v-bind:data="scope">
            </slot>
          </template>
      </avue-crud>
      </slot>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'group-item',
  props: {
    group: Object,
    groupNameKey: {
      type: String,
      default: 'groupName'
    },
    showItemHead: {
      type: Boolean,
      default: true
    },
    foreignKey: {
      type: String,
      default: 'groupId'
    },
    resource: String,
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    listApi: Function,
    addApi: Function,
    updateApi: Function,
    delApi: Function
  },
  data () {
    return {
      loading: false,
      params: {},
      obj: {},
      data: [],
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  computed: {
    permission () {
      return {
        viewBtn: this.$hasPermission(`${this.resource}:view`),
        editBtn: this.$hasPermission(`${this.resource}:update`),
        addBtn: this.$hasPermission(`${this.resource}:create`),
        delBtn: this.$hasPermission(`${this.resource}:delete`)
      }
    }
  },
  watch: {
    group: {
      handler () {
        if (this.$refs.crud) {
          this.getList()
        }
      },
      immediate: true
    }
  },
  methods: {
    getList () {
      if (!this.group) return
      this.loading = true
      const param = Object.assign({
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize
      }, this.params)
      param[this.foreignKey] = this.group.id
      this.data = []
      this.listApi(param).then(res => {
        const data = res.data.data
        this.loading = false
        this.page.total = data.total
        this.data = data.records
      }, () => {
        this.$message.error('数据加载失败')
        this.loading = false
      }).catch(() => {
        this.$message.error('数据加载失败')
        this.loading = false
      })
    },
    rowSave (row, done, loading) {
      row[this.foreignKey] = this.group.id
      this.addApi(row).then(() => {
        this.$message.success('新增成功')
        done()
        this.getList()
      }).catch(() => {
        loading()
      })
    },
    rowUpdate (row, index, done, loading) {
      this.updateApi(row).then(() => {
        this.$message.success('修改成功')
        done()
        this.getList()
      }).catch(() => {
        loading()
      })
    },
    rowDel (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.delApi({ id: row.id })
      }).then(() => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    searchChange (params, done) {
      if (done) done()
      this.params = params
      this.page.currentPage = 1
      this.getList()
    },
    refreshChange () {
      this.getList()
    },
    sizeChange (val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.getList()
    },
    currentChange (val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
  .group-item{
    .item-head{
      padding: 10px;
      margin-bottom: 3px;

      .head-text{
        padding: 0 10px;
        font-weight: bold;
        color: $--color-primary;
        border-left: 5px solid $--color-primary;
      }
    }
  }
</style>
